<template>
  <div>
    <!-- 标题栏 -->
    <mt-header title="学前端，到达内" fixed>
      <div slot="right" v-if="$store.state.isLogin">
        欢迎：{{$store.state.name}}
      </div>
      <div slot="right" v-else>
        <router-link class="link" to="/register">注册</router-link>
        &nbsp;
        <router-link class="link" to="/login">登录</router-link>
      </div>
    </mt-header>
    <!-- 导航 -->
    <mt-navbar style="margin-top: 40px;"
      v-model="active" fixed>
      <mt-tab-item 
        v-for="(item, i) in cats" :key="i" 
        :id="item.id+''">{{item.category_name}}</mt-tab-item>
      <!-- item.id+空字符串转成字符串类型，与this.active数据类型一致 -->
    </mt-navbar>
    <!-- 面板 -->
    <mt-tab-container
      style="margin-top: 90px; margin-bottom:55px;"
      v-infinite-scroll="loadMore"
      infinite-scroll-distance="50"
      :infinite-scroll-immediate-check="true">
      <!-- infinite-scroll-immediate-check 可以阻止首页数据不满一屏时自动调用loadMore -->
      <mt-tab-container-item>
        <!-- 轮播图 -->
        <mt-swipe style="height:56.1vw">
          <mt-swipe-item>
            <img style="width:100%;" src="/images/1.jpg" alt="">                            
          </mt-swipe-item>
          <mt-swipe-item>
            <img style="width:100%;" src="/images/2.jpg" alt="">
          </mt-swipe-item>
          <mt-swipe-item>
            <img style="width:100%;" src="/images/3.jpg" alt="">
          </mt-swipe-item>
        </mt-swipe>

        <!-- 显示文章列表项 -->
        <ArticleItem v-for="(item, i) in articles" :key="i" :article="item" />   

      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
import ArticleItem from '../components/article_item.vue'

export default {
  components:{
    ArticleItem
  },
  data() {
    return {
      page: 1,             // 表示当前页码
      cats: [],            // 表示当前类别列表
      active: '1',
      articles: [],        // 表示当前文章列表
      isLoading: false,    // 节流，防止触底重复发送请求   若已经在加载中，则不再重复发送请求 
    }
  },

  /** 当组件挂载完毕后执行 */
  mounted(){
    this.loadCats()  // 加载文章类别列表
    // 加载UI类别下的首页文章列表，通过callback方式返回查到的文章列表
    this.loadArticles(1, 1, (articleList)=>{
      this.articles = articleList
    })
  },

  activated(){
    this.isLoading = false
  },
  
  deactivated(){
    this.isLoading = true
  },

  methods: {

    /**  通过cid, page加载文章列表
     *   cid: 文章所属类别ID
     *   page: 页码
     *   callback:  获取响应后执行的回调函数，将会回传文章列表
     */
    loadArticles(cid, page, callback){
      this.$indicator.open({
        text:'加载中...',
        spinnerType: 'fading-circle'
      })
      this.axios.get(`/articles?cid=${cid}&page=${page}`).then(res=>{
        let articleList = res.data.results 
        // 调用callback方法，传入articleList，返回文章列表
        callback(articleList)
        this.$indicator.close()
      })
    },

    /** 触底加载下一页 */
    loadMore(){
      if(this.isLoading) return;    // 若正在加载，则直接返回

      this.isLoading = true
      this.page++
      let cid = this.active   // 当前类别ID
      let page = this.page    // 当前页码
      console.log(`触底加载下一页: cid:${cid}  page:${page} `)
      this.loadArticles(cid, page, (articleList)=>{
        this.articles.push(...articleList)  // 向现有数组的末尾进行追加
        this.isLoading = false
      })
    },

    /** 发请求，加载文章类别列表 */
    loadCats(){
      this.axios.get('/category').then(res=>{
        console.log('加载类别列表', res)
        this.cats = res.data.results   // 将数组存入data.cats
      })
    }
  },

  watch: {
    /** 监听更新导航, active的变化 */
    active(newval, oldval){
      console.log(newval) // newval就相当于选中项的数据库中的 类别ID 
      // 将滚动条滚动到顶部
      window.scrollTo(0, 0)
      // 重新重置page变量为1
      this.page = 1
      // 发送http请求， 加载当前选中项类别下的首页列表数据
      this.loadArticles(newval, 1, (articleList)=>{
        this.articles = articleList
      })
    }
  }

}
</script>
<style scoped>
.link{color: #fff;}
</style>

